<template>
    <div class="forgetPassword  ">
       <div class="logo">
            <a href="/" >
                <img :src="require('../../static/images/logo.png')">
            </a>
       </div>
       <div class="item">
            <h1>
                找回密碼
            </h1>
            <div class="labels">
                <label class="phone-number">
                    <span>手機號 </span>
                    <input type="number" placeholder="僅支持中國澳門地區"  @input="check" v-model="phoneNum">
                    <div class="errorTip" v-if="errorTip4">
                       {{msg4}}    
                   </div>
                </label>
                <label class="code">
                    <span>驗證碼 </span>
                    <input type="number" placeholder=""  @input="check" v-model="code">
                    <!-- <div class="code btn" @click="getCode">
                        {{msgCode}}
                    </div> -->
                     <input type="button" :v-canSend ="canSend" id="codeBtn" @click="getCode" :value="msgCode" :id="canSend?'codeBtn':'codeBtnNo'">

                    <div class="errorTip" v-if="errorTip5">
                        {{msg5}}   
                    </div>
                </label>
                <label >
                    <span>新密碼 </span>
                    <input type="password" name="" placeholder="" v-model="password" @input="check" maxlength="16" 
                    >
                    <div class="errorTip" v-if="errorTip2" >
                     {{msg2}} 
                    </div>
                </label>
                <label>
                    <span>重複新密碼 </span>
                    <input type="password" name="" v-model="password2" @input="check" maxlength="16">
                    <div class="errorTip" v-if="errorTip3">
                        {{msg3}} 
                    </div>
                </label>
            </div>
            <div class="register-btn">
                <a>
                    <el-button
                    plain
                    @click="sure"
                    >
                    确认
                    </el-button>
                </a>
            </div>
            
            
       </div>
    </div>
        
</template>

<script>
import {V1_CODE_MOBILE_TYPE,V1_APP_USER,V1_PASSWORD}  from '../config/api'
import md5 from 'js-md5';
export default {
	components:{
       
	},
    computed:{
        
    },
    data(){
       return{
        errorTip1:false,
        errorTip2:false,
        errorTip3:false,
        errorTip4:false,
        errorTip5:false,
        msg1:"",
        msg2:"",
        msg3:"",
        msg4:"",
        msg5:"",
        msgCode:"獲取驗證碼",
        password:"",
        password2:"",
        phoneNum:"",
        code:"",
        code2:"",
        count:120,
        canSend:true,
       }
    },
    activated(){ 
        this.$store.commit("IS_SHOW_ALERT",false)
    },   
    deactivated(){
    },
    methods:{
        check(){
            //判斷手機號碼
            if(this.phoneNum.length >= 8) {
                this.phoneNum=this.phoneNum.slice(0, 8);
            };
            if(this.phoneNum.length==0){
                this.errorTip4=true;
                this.msg4="手机號碼不能為空";
                return false;
            }else{
                let reg=/^[6][0-9]{7}/;
                if (reg.test(this.phoneNum)) {
                    this.errorTip4=false;
                }else{
                    this.errorTip4=true;
                    this.msg4="請輸入澳門號碼";
                    return false;
                };
            }
             //判斷驗證碼
            if(this.code.length >= 4) {
                this.code=this.code.slice(0, 4);
            }
            if (this.code.length==0) {
                this.errorTip5=true;
                this.msg5="請輸入驗證碼"
                return false;
            }else{
                this.errorTip5=false;
            }
            //判断密码
            if(this.password.length ==0) {
                this.errorTip2=true;
                this.msg2="密碼不能為空";
                return false;
            }else{
                // if(/^[a-zA-Z\d]{8,16}$/.test(this.password)) {
                //     this.errorTip2=false;
                // }else{
                //     this.errorTip2=true;
                //     this.msg2="密碼需要數字与字母的組合";
                //     return false;
                // }
            }
            //判断第二次密码
            if(this.password==this.password2){
                this.errorTip3=false;
            }else{
                this.errorTip3=true;
                this.msg3="兩次輸入的密碼不一致"
                return false;
            }
           return true;
           
        },
        getCode(){
             //獲取驗證碼
            if(this.phoneNum.length==0){
                this.errorTip4=true;
                this.msg4="請輸入澳門號碼";
            }else{
                let reg=/^[6][0-9]{7}/;
                if (reg.test(this.phoneNum)) {
                    // $("#getCode").attr("disabled", true); 
                    //验证码倒计时
                    if(this.canSend){
                        let interval = setInterval(() => {
                            this.count--;
                            this.msgCode="剩余"+this.count+"秒";
                            this.canSend=false;
                            if(this.count <= 0) {
                                clearInterval(interval);
                                this.msgCode="獲取驗證碼";
                                this.count=120;
                                this.canSend=true;
                            }
                        }, 1000);
                    //发送请求
                        this.$http.get(V1_CODE_MOBILE_TYPE+this.phoneNum+"/"+1).then(res => {
                             // console.log(this.phoneNum);
                             if(res.data.success){
                                // todo=>判断验证码是否正确
                                // this.code2=1234;
                                this.canSend=false;
                                this.$alert('驗證碼已發到您的手機上', '請查收', {
                                    confirmButtonText: '确定',
                                });
                               
                            }else{
                                this.$alert(res.data.msg, {
                                    confirmButtonText: '确定',
                                });
                                clearInterval(interval);
                                this.count=120;
                            }
                        })    
                    }
                    this.errorTip4=false;
                }else{
                    this.errorTip4=true;
                    this.msg4="請輸入澳門號碼";
                };
            }
            return true;
        },
        sure(){
            if(this.check()){
                // if(this.code!=this.code2){
                //     this.$alert('驗證碼错误', '請重新輸入', {
                //         confirmButtonText: '确定',
                //     });
                //     return false;
                // }else{
                    
                // }
                this.$http.put(V1_PASSWORD,{
                        "mobile":this.phoneNum,
                        "code":1234,
                        "password":md5(this.password),
                    }).then(res=>{
                        if(res.data.success){
                            this.check();
                             this.$router.go(-1);
                        }else{
                            this.$alert(res.data.msg, '請重新輸入', {
                                confirmButtonText: '确定',
                            });
                        }
                    })
            }
        }
    },
    mounted(){ 

       
    },
}
</script>
<style lang="scss">
    @import "../style/forgetPassword";
</style>